<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<link rel="stylesheet" href="css/shop.css">
<head>
    <style>
        @font-face {
            font-family: 'huayuan';
            src: url("font/花园肉丸.ttf");
        }

        .signOnForm {
            width: 36%;
            height: 63%;
            background-color: white;
            position: relative;
            top: 70px;
            margin: 0 auto;
            font-family: huayuan;
            font-size: 24px;
            text-align: center;
            padding-top: 50px;
        }

        .input {
            width: 250px;
            height: 30px;
            line-height: 20px;
            margin: 20px;
            position: relative;
            bottom: 4px;
        }

        .buttonClass {
            width: 45%;
            display: flex;
            flex-direction: row;
            margin: 0 auto;
            position: absolute;
            left: 0; top: 80%; right: 0; bottom: 0;
        }

        .buttonClass button {
            width: 120px;
            height: 40px;
            border-radius: 14px;
            border: none;
            background-color: antiquewhite;
            opacity: 80%;
            font-size: 22px;
            font-family: huayuan;
            color: rgb(244, 183, 103);
            display: block;
            margin: 0 auto;
            padding: 5px;
            cursor: pointer;
        }

        .buttonClass button span {
            display: inline-block;
            position: relative;
            transition: 0.5s;
        }

        .buttonClass button span:after {
            content: '\00bb';
            position: absolute;
            opacity: 0;
            top: 0;
            right: -20px;
            transition: 0.5s;
        }

        .buttonClass button:hover span {
            padding-right: 25px;
        }

        .buttonClass button:hover span:after {
            opacity: 1;
            right: 0;
        }

        .buttonClass a {
            color: rgb(244, 183, 103);
            display: block;
            margin: 0 auto;
        }

        #BackLink{
            top: 28px;
        }
    </style>
</head>

<div class="signOnForm">
    <form action="signOn" method="post">
        <p style="font-size: 26px;">请输入账号和密码</p>
        <c:if test="${requestScope.signOnMsg != null}">
            <p style="color: indianred;font-size: 16px;position: absolute;left: 0; top: 70%; right: 0; bottom: 0;">
                    ${requestScope.signOnMsg}</p>
        </c:if>
        <script>
            <%-- 增加时间戳来更换验证码图片 --%>
            window.onload=function(){
                document.getElementById("img").onclick=function(){
                    this.src = "verify?time=" + new Date().getTime();
                }
            }
        </script>
        <p>
        <div class="signOnContent">
        <div class="formItem">
            <label>账&emsp;号:</label>
            <input type="text" name="username"  class="input"> <br />
        </div>
        <div class="formItem">
            <label>密&emsp;码:</label>
            <input type="password" name="password"  class="input"> <br />
        </div>
        <div class="formItem">
            <label>验证码:</label>
            <input type="text" name="checkcode"  class="input"/> <br />
        </div>
            <img id="img" src="verify"  alt="">
        </div>
        </p>
        <div class="buttonClass">
            <button type="submit"><span>登录</span></button>
            <a href="registerForm">
                <button type="button"><span>注册</span></button>
            </a>
        </div>

    </form>


</div>
<div id="BackLink">
    <a href="mainForm">
        <button onclick="back()"><span>返回主页面</span></button>
    </a>
</div>

</div>




